<template>
  <el-dialog
    class="public-dialog"
    :title="`${isEdit ? '修改' : '新增'}`"
    width="660"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div v-loading="loading">
      <el-form
        ref="formRef"
        :model="formValues"
        :rules="rules"
        label-position="top"
        label-width="120px"
      >
        <el-form-item label="费用项" prop="fee_ident">
          <el-select
            v-model="formValues.fee_ident"
            placeholder="请选择"
            class="w-full"
            clearable
            filterable
          >
            <el-option
              v-for="item in option['tcCost']"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否整柜" prop="time">
          <el-checkbox-group v-model="formValues.fee_attrs">
            <el-checkbox
              :label="item.value"
              v-for="item in option['is_container']"
              :key="item"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="费用类型" prop="fee_type">
          <el-radio-group v-model="formValues.fee_type">
            <el-radio :label="0">主费用项</el-radio>
            <el-radio :label="1">子费用项</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="归属费用"
          v-if="formValues.fee_type"
          prop="fee_cate"
        >
          <el-select
            v-model="formValues.fee_cate"
            placeholder="请选择"
            class="w-full"
            clearable
            filterable
          >
            <el-option
              v-for="item in option['tcMainCost']"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对应头程费用" prop="map_tc_fee_ident">
          <el-select
            v-model="formValues.map_tc_fee_ident"
            placeholder="请选择"
            class="w-full"
            clearable
            filterable
          >
            <el-option
              v-for="item in option['tc_sys_fee_config']"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否计算成本" prop="is_calc_costing">
          <el-select
            v-model="formValues.is_calc_costing"
            placeholder="请选择"
            class="w-full"
          >
            <el-option
              v-for="item in option['is_calc_costing']"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="time">
          <el-input
            v-model="formValues.remark"
            :rows="2"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import {
  financeTcCostConfigDetail,
  financeTcCostConfigCreate,
  financeTcCostConfigUpdate,
} from "../api.js";
const props = defineProps({
  id: { type: [String, Number], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  option: { type: Object, default: () => ({}) },
});
const rules = reactive({
  fee_ident: [{ required: true, message: "请选择费用项", trigger: "change" }],
  fee_type: [{ required: true, message: "请选择费用类型", trigger: "change" }],
  fee_cate: [{ required: true, message: "请选择归属费用", trigger: "change" }],
  is_calc_costing: [
    { required: true, message: "请选择是否计算成本", trigger: "change" },
  ],
  map_tc_fee_ident: [
    { required: true, message: "请选择对应头程费用", trigger: "change" },
  ],
});
const { option } = toRefs(props);
const loading = ref(false);
const isEdit = computed(() => {
  return !!props.id;
});
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
watch(
  () => props.id,
  (val) => {
    if (val) {
      nextTick(() => {
        getDetail(val);
      });
    }
  }
);
const getDetail = async (val) => {
  const { data } = await financeTcCostConfigDetail({ id: val });
  formValues.value = data || {};
};
const formValues = ref({});
const formRef = ref();
const handleSave = async () => {
  try {
    formRef.value?.validate(async (valid) => {
      if (valid) {
        const { code, message } = await (isEdit.value
          ? financeTcCostConfigUpdate
          : financeTcCostConfigCreate)(formValues.value);
        if (code != 200) return ElMessage.error(message);
        ElMessage.success(isEdit.value ? "修改成功" : "保存成功");
        handleClose(true);
      } else {
        return false;
      }
    });
  } catch (e) {
    if (e.toString().includes(false)) {
      ElMessage.warning("请检查表单信息");
    }
    console.error(e);
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  formValues.value = {};
  formRef.value?.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
